<template>
  <div class="dictionary-list-container">
    <Table
      v-loading="loading"
      :columns="columns"
      :data-source="dataSource"
      :count="count"
      :page-no.sync="query.pageNo"
      :page-size.sync="query.pageSize"
      :request="request"
      :form-data.sync="formData"
      :button-group="buttonGroup"
    />

    <el-dialog :visible.sync="dialogVisible" title="添加字典值" width="800px">
      <PageForm
        ref="dialogForm"
        :form-data.sync="ruleForm"
        :list="pageList"
        :rules="dialogRules"
        label-position="top"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogEditVisible"
      title="编辑字典值"
      width="800px"
    >
      <PageForm
        ref="dialogForm"
        :form-data.sync="ruleForm"
        :list="pageEditList"
        :rules="dialogRules"
        label-position="top"
      />
    </el-dialog>
  </div>
</template>

<script>
import Table from "@/components/Table";
import {
  getDictItemListByConditionApi,
  addDictItemApi,
  updateDictItemApi,
  deleteDictItemApi,
} from "../../../api/dictionary-list";
import PageForm from "@/components/PageForm";

export default {
  name: "DictionaryList",
  components: {
    Table,
    PageForm,
  },
  data() {
    return {
      dialogVisible: false,
      dialogEditVisible: false,
      query: {
        pageNo: 1,
        pageSize: 10,
      },
      loading: false,
      dataSource: [],
      count: 0,
      formData: {
        dictCode: "",
      },
      ruleForm: {
        itemCode: "",
        itemName: "",
        dictCode: "",
        sortNum: "",
      },
    };
  },
  computed: {
    // list() {
    //   return [
    //     {
    //       list: [
    //         {
    //           span: 4,
    //           prop: "dictCode",
    //           component: "input",
    //           componentProps: {
    //             placeholder: "请输入字典编码",
    //           },
    //         },
    //       ],
    //     },
    //   ];
    // },
    columns() {
      return [
        {
          prop: "itemCode",
          label: "字典值编码",
        },
        {
          prop: "itemName",
          label: "字典值名称",
        },
        {
          prop: "sortNum",
          label: "排序",
        },
        {
          prop: "action",
          label: "操作",
          type: "action",
          componentProps: {
            fixed: "right",
          },
          buttonGroup: [
            {
              label: "编辑",
              type: "primary",
              click: (row) => {
                this.dialogEditVisible = true;
                this.ruleForm = row;
              },
            },
            {
              label: "删除",
              type: "danger",
              click: (row) => {
                this.$confirm("此操作将删除此条数据, 是否继续?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }).then(async () => {
                  try {
                    await deleteDictItemApi({ itemId: row.itemId });
                    this.$message.success("删除成功");
                    this.request();
                  } catch (error) {
                    this.$message.error("删除失败");
                  }
                });
              },
            },
          ],
        },
      ];
    },
    buttonGroup() {
      return [
        {
          label: "添加",
          type: "primary",
          click: () => {
            this.dialogVisible = true;
            this.resetForm();
          },
        },
      ];
    },
    pageList() {
      return [
        {
          list: [
            // 字典值编码
            {
              span: 24,
              prop: "itemCode",
              label: "字典值编码",
              component: "input",
              componentProps: {
                placeholder: "请输入字典值编码",
              },
            },
            // 字典值名称
            {
              span: 24,
              prop: "itemName",
              label: "字典值名称",
              component: "input",
              componentProps: {
                placeholder: "请输入字典值名称",
              },
            },
            // 排序
            {
              span: 24,
              prop: "sortNum",
              label: "排序",
              component: "input",
              componentProps: {
                placeholder: "请输入排序",
              },
            },
            // 字典编码
            // {
            //   span: 24,
            //   offset: 4,
            //   prop: "dictCode",
            //   label: "字典编码",
            //   component: "input",
            //   componentProps: {
            //     placeholder: "请输入字典编码",
            //   },
            // },
          ],
        },
        {
          list: [
            {
              span: 24,
              label: "",
              prop: "action",
              component: "action",
              componentProps: [
                {
                  label: "取消",
                  type: "default",
                  click: () => {
                    this.dialogVisible = false;
                    // 重置表单
                    this.ruleForm = {
                      itemName: "",
                      dictCode: "",
                      sortNum: "",
                    };
                  },
                },
                {
                  label: "添加",
                  type: "primary",
                  click: () => {
                    // 验证表单
                    if (this.$refs.dialogForm) {
                      this.$refs.dialogForm.validate((valid) => {
                        if (valid) {
                          this.handleSave();
                        }
                      });
                    }
                  },
                },
              ],
            },
          ],
        },
      ];
    },
    dialogRules() {
      return {
        dictName: [
          { required: true, message: "请输入字典名称", trigger: "blur" },
        ],
        dictCode: [
          { required: true, message: "请输入字典编码", trigger: "blur" },
        ],
        sortNum: [{ required: true, message: "请输入排序", trigger: "blur" }],
      };
    },
    pageEditList() {
      return [
        {
          list: [
            {
              span: 24,
              prop: "itemCode",
              label: "字典值编码",
              component: "input",
              componentProps: {
                disabled: true,
                placeholder: "请输入字典值编码",
              },
            },
            // 字典名称
            {
              span: 24,
              prop: "itemName",
              label: "字典值名称",
              component: "input",
              componentProps: {
                placeholder: "请输入字典值名称",
              },
            },
            // 排序
            {
              span: 24,
              prop: "sortNum",
              label: "排序",
              component: "input",
              componentProps: {
                placeholder: "请输入排序",
              },
            },
            // {
            //   span: 24,
            //   offset: 4,
            //   prop: "dictCode",
            //   label: "字典编码",
            //   component: "input",
            //   componentProps: {
            //     placeholder: "请输入字典编码",
            //   },
            // },
          ],
        },
        {
          list: [
            {
              span: 24,
              label: "",
              prop: "action",
              component: "action",
              componentProps: [
                {
                  label: "取消",
                  type: "default",
                  click: () => {
                    this.dialogEditVisible = false;
                    // 重置表单
                    this.ruleForm = {
                      dictName: "",
                      dictCode: "",
                      sortNum: "",
                    };
                  },
                },
                {
                  label: "更新",
                  type: "primary",
                  click: () => {
                    // 验证表单
                    if (this.$refs.dialogForm) {
                      this.$refs.dialogForm.validate((valid) => {
                        if (valid) {
                          this.handleUpdate();
                        }
                      });
                    }
                  },
                },
              ],
            },
          ],
        },
      ];
    },
  },
  methods: {
    resetForm() {
      this.ruleForm = {
        itemId: "",
        itemCode: "",
        itemName: "",
        dictCode: "",
        sortNum: "",
      };
      this.$refs.dialogForm?.clearValidate?.();
    },
    async request() {
      try {
        if (this.loading) return;

        this.loading = true;

        const res = await getDictItemListByConditionApi({
          pageNo: this.query.pageNo,
          pageSize: this.query.pageSize,
          dictCode: this.$route.query.dictCode,
        });

        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }

        this.dataSource = res.data.list;
        this.count = res.data.totalCount;
      } catch (error) {
        console.log(error);
      } finally {
        this.loading = false;
      }
    },
    // 处理保存
    async handleSave() {
      try {
        if (this.loading) return;
        this.loading = true;

        const res = await addDictItemApi({
          ...this.ruleForm,
          dictCode: this.$route.query.dictCode,
        });

        this.loading = false;

        if (res.code === 200) {
          this.$message.success("添加成功");
          this.dialogVisible = false;
          // 重置表单
          this.resetForm();
          // 刷新列表
          this.request();
        }
      } catch (error) {
        this.loading = false;
        console.error(error);
      }
    },
    // 处理更新
    async handleUpdate() {
      try {
        if (this.loading) return;
        this.loading = true;

        const res = await updateDictItemApi({
          ...this.ruleForm,
          dictCode: this.$route.query.dictCode,
        });

        this.loading = false;

        if (res.code === 200) {
          this.$message.success("更新成功");
          this.dialogEditVisible = false;
          this.resetForm();
          // 刷新列表
          this.request();
        }
      } catch (error) {
        this.loading = false;
        console.error(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dictionary-list-container {
  padding: 20px;
}
</style>
